/* 主要样式 */

.C_category-box {
    background-color: #eee9b6;
    padding: 16px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体感阴影 */
    width: 100%; /* 占据container的宽度 */
    max-width: 53.2%; /* 最大宽度为600px */
    margin-bottom: 10px; /* 下方间距为10px */
    box-sizing: border-box;
    position: relative; /* 添加相对定位 */
}

.C_category-box h3 {
    text-align: center;
    margin-top: 0; /* 清除标题默认顶部间距 */
    margin-bottom: 20px; /* 下方留出空间 */
}

.C_category-details {
    display: flex;
    border-top: 1px solid #ccc; /* 添加立体感边框 */
    padding-top: 10px; /* 上方留出空间 */
}

.C_details-column {
    flex: 1;
}

.C_details-column p {
    margin: 0; /* 清除段落默认间距 */
    padding: 5px 0; /* 添加上下内边距 */
}

.C_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto; /* 页面高度的80% */
    font-family: Arial, sans-serif;
    /* 在页面中居中 */
    position: relative; /* 添加绝对定位 */
    top: 10px;
    margin: auto auto 20rem;
}


/* 辅助样式 */
body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

.category_show_big_div {
    margin-bottom: 20rem;
}

/* 选择框样式 */
.category_select-header {
    background-color: #ffffff;
    color: #fff;
    padding: 20px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);;
}

.category_select-header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    font-size: 24px;
}

.category_select-header nav ul li {
    margin: 0 10px;
}

.category_select-header nav ul li a {
    color: #000000;
    text-decoration: none;
    padding: 10px;
    transition: background-color 0.3s ease;
}

.category_select-header nav ul li a:hover {
    background-color: #8a8670;
    border-radius: 1px;
}

/* 帖子样式 */
#AllPosts_Show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto; /* 页面高度的80% */
    font-family: Arial, sans-serif;
    position: relative; /* 添加绝对定位 */
    top: 10px;
    width: 81%;
    margin: 0 auto; /* 居中显示 */
}

.Posts_big_div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto; /* 页面高度的80% */
    font-family: Arial, sans-serif;
    margin: auto; /* 在页面中居中 */
    position: relative; /* 添加绝对定位 */
    width: 100%;
    top: 10px;
}

.P_post_big {
    background-color: #f6f2d0;;
    padding: 10px;
    margin-bottom: 10px; /* 下方间距为10px */
    display: flex;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体感阴影 */
    width: 100%; /* Posts_big_div */
    box-sizing: border-box;
    position: relative; /* 添加相对定位 */
}

.P_post_big:last-child {
    margin-bottom: 0; /* 移除最后一个盒子的下边距 */
}

.P_post_avatar {
    width: 16.666%; /* 1/6 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.P_others {
    width: 83.333%; /* 5/6 */
    padding-left: 10px; /* 左边距 */
    display: flex;
    flex-direction: column;
}

.P_avatar img {
    width: 75px;
    height: 75px;
    border-radius: 50%; /* 创建一个圆形的元素 */
}

.P_name {
    width: 100%;
    height: 100%;
    text-align: center;
}

.P_title {
    width: 100%;
    border-bottom: 1px solid #ccc; /* 底边框 */
    padding-bottom: 10px; /* 底边距 */
}

.P_title h3 {
    margin: 0;
}

.P_info {
    display: flex;
    justify-content: space-between; /* 平均分布 */
    align-items: center;
    padding-top: 5px; /* 上边距 */
}

.P_tab_time {
    min-width: 61%;
}

.P_tab_time p {
    margin: 0;
}

.P_min_div {
    text-align: center;
    flex: 1; /* 平均分布 */
    min-width: 13%;
    max-width: 13%;
}

.P_min_div p {
    margin: 0;
}


/* 发布帖子样式 */

.urlbutton {
    width: 100%; /* 占据container的宽度 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体感阴影 */
    position: relative;
    background-color: #f6f2d0; /* 蓝色背景 */
    margin-bottom: 10px;
}

.urlbutton p {
    margin: 0;
    text-align: center;
}

.buttondiv {
    position: relative;
    left: 85%;
    cursor: pointer;
    background-color: #3f51b5; /* 蓝色背景 */
    padding: 5px 10px;
    border-radius: 5px;
    color: white; /* 白色文字 */
    transition: background-color 0.3s; /* 鼠标悬浮变色过渡效果 */
    max-width: 100px;
}

.buttondiv p {
    margin: 0;
    text-align: center;
}

.buttondiv:hover {
    background-color: #2196f3; /* 悬浮时的背景色变化 */
}


